<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    /* 扩张热区最简单的办法是为它设置一圈透明边框，因为鼠标对元素边
框的交互也会触发鼠标事件，这一点是描边和投影所不及的。就这个例子而
言，把元素的热区在四个方向上各向外扩大10px 其实很容易做到： */
    /* ！原因在
于背景在默认情况下会蔓延到边框的下层。简单好用的background-clip
属性可以把背景限制在原本的区域之内： */
    /* border: 10px solid transparent;
background-clip: padding-box; */
    /* 在图6-6 中可以看到，这个方法很管用。不过好景不长，当你需要给
按钮加上真正的边框效果时，会发现按钮仅有的那道边框已经被我们挪作
他用了。怎么办？很简单，可以用内嵌投影来模拟出一道（实色）边框
（参见图6-7）： */
    /* border: 10px solid transparent;
box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;
background-clip: padding-box; */
    /* 这个解决方案在其他方面也不够完美：边框会影响布局，而且在某些
场景下我们可能根本无法利用边框。那该怎么改进呢？我们放弃边框，然后改
用另外一个特性来实现：伪元素同样可以代表其宿主元素来响应鼠标交互。 */
    /* 我们可以在按钮的上层覆盖一层透明的伪元素，并让伪元素在四个方向 上都比宿主元素大出10px： button::before {
        content: '';
        position: absolute;
        top: -10px;
        right: -10px;
        bottom: -10px;
        left: -10px;
    } */
</style>

<body>

</body>

</html>